<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <div class="titles">活动设备租赁后台管理系统</div>
          <div>
            <span>
              <el-link @click="goChat" style="margin-right: 10px">发消息  <i class="el-icon-bell el-icon--right"></i> </el-link>
              <el-link>|</el-link>
              <router-link to="/main" style="text-decoration:none">
                <el-link style="margin-left: 10px">去租赁<i class="el-icon-view el-icon--right"></i></el-link>
              </router-link>
            </span>
            <el-dropdown class="userInfo" @command="commandHandler">
              <span class="el-dropdown-link">
                用户名:{{user.username}}<i><img :src="user.avatar"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="drawer">个人中心</el-dropdown-item>
                 <el-dropdown-item command="setting">设置</el-dropdown-item>
                 <el-dropdown-item command="logout">注销登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
          </div>
    </el-header>

    <!--:direction="direction"-->
      <!--抽屉-->
      <el-drawer
        title="个人信息"
        :visible.sync="drawer"
        :before-close="handleClose">
        <div>
        <el-descriptions class="margin-top" title="基础信息" :column="2" size="mini">
          <template slot="extra">
            <el-button type="primary" size="small" plain @click="show">修改</el-button>
          </template>
          <el-descriptions-item label="用户名">{{user.username}}</el-descriptions-item>
          <el-descriptions-item label="昵称">{{user.nickname}}</el-descriptions-item>
          <el-descriptions-item label="性别">
            <!--test="${user.sex==1?'女':'男'}"-->
            <el-tag size="small">{{user.sex===1?'女':'男'}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="生日">{{user.birth}}</el-descriptions-item>
          <el-descriptions-item label="类型">{{user.type===0?'超级管理员':'系统用户'}}</el-descriptions-item>
        </el-descriptions>
        <!--分割线-->
        <el-divider></el-divider>
        <div>
          <el-descriptions title="修改密码" class="margin-top"></el-descriptions>
            <div class="margin-top">
              原&nbsp;密&nbsp;码&nbsp;：<el-input v-model="password"  size="medium" style="width: 200px;margin-bottom: 10px" placeholder="请输入原密码" type="password" suffix-icon="el-icon-view"></el-input>
              <br>
              新&nbsp;密&nbsp;码&nbsp;：<el-input v-model="password1" size="medium" style="width: 200px;margin-bottom: 10px" placeholder="请输入新密码" type="password" suffix-icon="el-icon-view"></el-input>
              <br>
              确认密码：<el-input v-model="password2" size="medium" style="width: 200px" placeholder="请再次输入新密码" type="password" suffix-icon="el-icon-view"></el-input>
            </div>
          <div class="footer">
            <el-button size="medium" plain>取 消</el-button>
            <el-button size="medium" type="primary" @click="closeDrawer" plain>确定</el-button>
          </div>
        </div>
        </div>
      </el-drawer>

    <el-container class="mainContainer">
      <div class="mainAside">
        <el-aside width="200px">
          <el-menu router unique-opened style="background-color: #ffffff">
              <el-submenu :index="index+''"
                          v-for="(item,index) in routes" :key="index" style="background-color: #ffffff;">
                   <template slot="title">
                       <i :class="item.iconCls" style="margin-right: 10px;color:rgb(255,208,76) "></i>
                       <span style="color:rgb(0,0,0);font-family: '微软雅黑 Light'">{{item.name}}</span>
                   </template>
                   <el-menu-item :index="children.path"
                                 v-for="(children,indexj) in item.children"
                                 :key="indexj" style="background-color: #ffffff">
            {{children.name}}
                   </el-menu-item>
               </el-submenu>
          </el-menu>
        </el-aside>
      </div>

      <div class="mainMain">
        <el-main>
          <!--面包屑-->
          <el-breadcrumb v-if="this.$router.currentRoute.path!='/home'" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="homeWelcome" v-if="this.$router.currentRoute.path=='/home'">欢迎回来，{{user.username}}</div>
          <router-view class="homeRouterView"/>
        </el-main>
      </div>
    </el-container>
    <!--子组件弹窗-->
  </el-container>
    <updateInfo :updateVisible="updateVisible" @changeShow="showUpdate" ref="updateRef"></updateInfo>
    <updateComfirm :updateComfirmVisible="updateComfirmVisible" @changeShow="showComfirmUpdate" ref="updateRef"></updateComfirm>
  </div>
</template>

<script>
  import updateInfo from '../components/home/updateInfo'
  import updateComfirm from '../components/home/updateComfirm'

  export default {
    name: 'Home',
    data(){
      return{
        //将存在sessionStorage的字符串获取出来转换成对象
        user:JSON.parse(window.sessionStorage.getItem('user')),
        drawer:false,
        comfirm:{},
        password:'',
        password1:'',
        password2:'',
        per:false,
        store:false,
        score:'',
        // 控制新增编辑弹窗的显示与隐藏
        updateVisible: false,
        updateComfirmVisible:false
      }
    },
    components:{
      updateInfo,
      updateComfirm
    },
    computed:{
      routes(){
        return this.$store.state.routes;
      }
    },
    methods:{
      goChat(){
        this.$router.push('/chat');
      },
      commandHandler(command){
        if (command=='logout'){
          this.$confirm('重置密码将退出登录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            // 调用退出登录方法
            this.postRequest('/logout');
            //移除用户信息
            window.sessionStorage.removeItem('tokenStr');
            window.sessionStorage.removeItem('user');
            //清空侧边栏菜单
            this.$store.commit('initRoutes',[]);
            //跳转到登录页
            this.$router.replace('/')
            this.$notify.success({ title: '成功', message: '退出成功'});
          }).catch(() => {
            this.$notify.success({ title: '成功', message: '已取消退出'});
          });
        }else if(command=='drawer'){
          this.drawer=true;
          this.postRequest('/personal/data/comfirm/'+this.user.userId).then(resp=>{
            if (resp){
              this.comfirm=resp;
              this.score=resp.score;
              // 判断认证类型，如果是0显示个人认证，否则显示商铺认证
              if (resp.perStore==0){
                this.per=true;
              }else{
                this.store=true;
              }
            }
          })
        }else{
          console.log("还没写");
        }
      },
      handleClose(done) {
        done();
      },
      // 修改密码表单
      closeDrawer() {
        if (this.password&&this.password1&&this.password2) {
          if (this.password1==this.password2){
            this.$confirm('此操作将退出登录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
            this.postRequest('/per/data/password/'+this.user.userId,this.password,this.password1).then(resp=>{
              if (resp){
                this.password='';
                this.password1='';
                this.password2='';

                this.$notify.success({ title: '成功', message: '密码修改成功，请重新登录'});
                //移除用户信息
                window.sessionStorage.removeItem('tokenStr');
                window.sessionStorage.removeItem('user');
                //跳转到登录页
                this.$router.replace('/')
              }
            })
            })
          }else {
            this.$notify.warning({ title: '警告', message: '新旧密码不一致'});
          }
        }else {
          this.$notify.info({ title: '消息', message: '密码不能为空'});
        }
      },
      //1、修改基础信息
      // （1）按钮点击事件 显示编辑弹窗组件
      show(){
        this.updateVisible = true;
      },
      // （2）监听子组件弹窗关闭后触发，有子组件调用
      showUpdate(data){
        if(data === 'false'){
          this.updateVisible = false;
        }else{
          this.updateVisible = true;
        }
      },
      //2、修改认证信息
      // （1）按钮点击事件 显示编辑弹窗组件
      showComfirm(){
        this.updateComfirmVisible = true;
      },
      // （2）监听子组件弹窗关闭后触发，有子组件调用
      showComfirmUpdate(data){
        if(data === 'false'){
          this.updateComfirmVisible = false;
        }else{
          this.updateComfirmVisible = true;
        }
      },
    }
  }
</script>

<style>
  /*头部样式*/
    .homeHeader {
      background-color: #000000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .homeHeader .titles {
        margin-left: 30px;
        font-size: 25px;
        font-family: 华文楷体;
      color: rgb(255, 208, 61);
    }
    .homeHeader .userInfo {
        cursor: pointer;
    }
    .el-dropdown-link img {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-left: 8px;
    }
  .homeWelcome{
    text-align: center;
    font-size: 30px;
    font-family: 华文楷体;
    color:rgb(255, 208, 75);
    padding-top: 50px;
  }
  .homeRouterView{
    margin-top: 10px;
  }
  .margin-top{
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 30px;
  }
  .footer{
    margin-top: 20px;
    margin-left: 288px;
  }

  .mainContainer{
    width: 100%;
    height: 100%;
}
  .mainAside{
    width: 13%;
    height: 660px;
    background-color: #ffffff;
    border-right:2px solid #f3f3f3
  }
  .mainMain{
    border-color: #d7eefa;
    width: 86%;
    background-color: #ffffff;
    height: 660px;
  }

</style>
